<template>
  <div>
    <radio-group class="radio-group" style="padding-bottom:55px;" @change="radioChange">
      <label class="radio" style="display:flex;align-items:center;" v-for="(coupon, index) in coupons" :key="index">
          <div class="leftRadio">
            <radio :value="coupon.id" color="black"/>
          </div>
          <div class="card">
            <div class="zan-cell zan-cell--access">
              <div class="zan-cell__bd zan-font-bold">
                {{coupon.title}}
                <span v-if="coupon.coupon_type == '现金券'" class="zan-tag" style="background:#ff4949">现金券</span>
                <span v-if="coupon.coupon_type == '折扣券'" class="zan-tag" style="background:#13ce66">折扣券</span>
                <span v-if="coupon.coupon_type == '商品券'" class="zan-tag" style="background:#f7ba2a">商品券</span>
                <span v-if="coupon.coupon_type == '买n送m券'" class="zan-tag" style="background:#20a0ff">买n送m券</span>
                <span v-if="coupon.coupon_type == '第二杯半价券'" class="zan-tag" style="background:#9932CC">第二杯半价券</span>
                <span v-if="coupon.coupon_type == '特权券'" class="zan-tag" style="background:#FF82AB">特权券</span>
                <span v-if="coupon.coupon_type == 'RANDOM'" class="zan-tag" style="background:#FF82AB">随机券</span>
              </div>
            </div>
            <div class="zan-cell zan-cell--access">
              <div class="zan-cell__bd" style="font-size:14px;">{{coupon.coupon_tpl.base_info.description}}</div>
            </div>
            <div class="zan-cell zan-cell--access">
              <div class="zan-cell__bd" style="font-size:14px;">
              有效期：{{coupon.begin_time}} 至 {{coupon.end_time}}</div>
            </div>
          </div>
      </label>
    </radio-group>
    <!-- 底部操作栏 -->
    <div class="operate-bar">
      <div class='gouwuche'>
        <div style="float:right;padding-right:10px;"><span v-if="coupon.title">已选择</span> {{coupon.title}}</div>
      </div>
      <div class="submit-btn" @click='submit'>
        <div class="submit-btn-label">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      coupons:[],
      id:'',
      coupon:{title:''}
    }
  },
  computed: {
    ...mapGetters([
      'login_info',
      'shop',
      'cart_list',
      'select_coupon',
      'cart_list',
      'user'
    ])
  },
  methods: {
    submit(){
      this.$store.dispatch('setSelectCoupon',this.coupon)
      //this.$store.dispatch("setPayAmount",this.discount_coupon_amount)
      wx.navigateBack({
        delta: 1
      })
    },
    radioChange (e) {
      let id = parseInt(e.target.value)
      let coupon =  _.find(this.coupons, ['id', id])

      let self = this
      let form = {
        shop_id: self.shop.id,
        user_id: self.user.id,
        order_items: self.cart_list,
        pay_coupons:[{coupon_id:id}]
      }

      api.postPayCenterPrepay(form).then(res => {
        if (res.code == 0) {
          self.coupon=coupon
        }else{
          wx.showToast({title:res.msg,icon:'none'})
        }
      })
    },
    handletabContents(arrayCoupons){
      this.coupons = []
      arrayCoupons.forEach(item=>{
        item.begin_time = this.formatDate(item.begin_time)
        item.end_time = this.formatDate(item.end_time)
        item.coupon_type = this.handle_coupon_type(item.coupon_type)
        this.coupons.push(item)
      })
      wx.hideLoading()
    },
    formatDate(val) {
      const date = new Date(val)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return year+'-'+month+'-'+day
    },
    handle_coupon_type(type){
      switch(type)
      {
      case 'CASH':
        return '现金券'
        break;
      case 'DISCOUNT':
        return '折扣券'
        break;
      case 'PRODUCT':
        return '商品券'
        break;
      case 'BUY_N_GIVE_M':
        return '买n送m券'
        break;
      case 'SECOND_HALF_PRICE':
        return '第二杯半价券'
        break;
      case 'RANDOM':
        return type
        break;
      default:
        return '特权券'
      }
    }
  },
  /*mounted(){
    console.log('coupon_index=>',this.coupon_index)
    this.coupons.forEach((item,index)=>{
      if (index == this.coupon_index) {
        item.checked = true
        console.log('item=>',item)
        console.log('checked=>',item.checked)
      }
    })
  },*/
  async beforeMount () {
    wx.showLoading({
      title: '加载中',
    })
    let grantCoupons = await api.findCoupons({openid: this.login_info.openid, brand_id:this.login_info.brand_id, status: 'grant'})
    if (grantCoupons.code == 0) {
      this.handletabContents(grantCoupons.data)
    }
  }
}
</script>

<style>
page{
  background: #EAEAEA;
}
.leftRadio{
  width: 10%;
  margin-left: 15px;
}
.card{
  width: 82%;
  margin: 10px auto;
  background: white;
  border-radius: 5px;
}
.operate-bar{
  z-index: 1001;
  position: fixed;
  bottom: 0px;
  height:55px;
  line-height: 55px;
  width:100%;
  display: flex;
}
.gouwuche{
  width:70%;
  background:white;
  height: 100%;
}
.submit-btn{
  height:100%;
  background:black;
  width:30%;
  display:flex;
}
.submit-btn-label{
  color:white;
  font-size:20px;
  margin:auto;
}
</style>
